<template>
	<view class="instructions-page">
		<!-- 自定义头部 -->
		<headerSlot :propsColor="'#fff'">
			<template v-slot:header>
				<view class="header-container" @click="closePage()">
					<view class="back-btn">
						<text class="cuIcon-back"></text>
					</view>
					<view class="page-title">
						使用须知
					</view>
				</view>
			</template>
		</headerSlot>

		<!-- 主要内容区域 -->
		<view class="content-container">
			<!-- 说明卡片 -->
			<view class="intro-card">
				<view class="intro-header">
					<view class="intro-icon">
						<text class="cuIcon-notification"></text>
					</view>
					<text class="intro-title">使用须知</text>
				</view>
				<text class="intro-desc">请仔细阅读以下使用规则，共同维护良好的社区环境</text>
			</view>

			<!-- 折叠面板列表 -->
			<view class="collapse-section">
				<zh-collapse @change='change' accordion>
					<zh-collapse-item 
						v-for="item in list" 
						:key="item.id"
						:title='item.title' 
						@clickContent='clickContent'
					>
						<template slot='cont'>
							<view class="content-list">
								<view 
									class="content-item" 
									v-for="(subItem, index) in item.content" 
									:key="index"
								>
									<view class="item-content">
										<text class="item-number">{{index + 1}}</text>
										<text class="item-text">{{subItem}}</text>
									</view>
								</view>
							</view>
						</template>
					</zh-collapse-item>
				</zh-collapse>
			</view>

			<!-- 底部提示 -->
			<view class="footer-tip">
				<view class="tip-content">
					<view class="tip-icon">
						<text class="cuIcon-warn"></text>
					</view>
					<view class="tip-text">
						<text class="tip-title">温馨提示</text>
						<text class="tip-desc">如有疑问，请联系客服咨询</text>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import headerSlot from '@/components/header-slot.vue';
	
	export default {
		components: {
			headerSlot,
		},
		data() {
			return {
				list: [{
						id: 1,
						title: '关于邻里集市',
						content: ['商品确认：下单前，请仔细核对商品信息，包括名称、规格、价格等，确保无误后再进行支付。',
							'配送时间：商品配送时间可能受集市库存、物流等因素影响，请耐心等待，如有特殊需求可提前与客服沟通。',
							'退换政策：商品退换需遵循集市的相关政策，如因商品质量问题需退换，请保留好购物凭证，并及时联系客服处理。',
							'费用透明：包括商品价格、服务费及可能的运费等，请在下单前确认费用明细，避免产生纠纷。',
							'隐私保护：我们承诺保护您的个人信息与购物记录，不会泄露给第三方，但请您也注意保护自己的账号与支付安全。'
						]
					},
					{
						id: 2,
						title: '关于邻里下单互助',
						content: ['信息真实：发布互助需求时，请确保信息真实准确，包括需求内容、时间、地点等，避免虚假信息造成他人困扰或资源浪费。',
							'及时沟通：在互助过程中，双方应保持及时有效的沟通，明确任务细节与要求，确保互助顺利进行。',
							'尊重他人：互助是基于邻里间的友好与信任，请尊重对方的意愿与时间安排，不得强迫或提出不合理要求。',
							'安全第一：进行线下互助时，请注意个人及财产安全，选择公共场所或有人陪同的情况下进行，避免单独前往陌生地点。',
							'信用评价：互助完成后，请根据实际情况给予对方客观公正的评价，共同维护良好的社区互助环境。'
						]
					},
					{
						id: 3,
						title: '关于社区论坛',
						content: ['文明发言：论坛是公共交流平台，请遵守社区规范，文明用语，不得发布侮辱、诽谤、暴力等不良信息。',
							'尊重隐私：不得在论坛上泄露他人隐私信息，包括但不限于联系方式、家庭住址等，保护他人隐私安全。',
							'合法合规：发布内容需符合国家法律法规，不得传播违法违规信息，如色情、赌博、反动等内容。',
							'理性讨论：对于不同观点，请保持理性态度，友好交流，避免争吵与冲突，共同营造和谐的社区氛围。',
							'版权意识：转载或分享他人作品时，请注明出处，尊重原创版权，不得未经授权擅自使用他人作品。'
						]
					},
					{
						id: 4,
						title: '关于闲置',
						content: [
							'商品合规：闲置商品需符合国家相关法律法规，不得销售假冒伪劣、违禁品或侵犯他人知识产权的商品。',
							'信息准确：发布商品信息时，请确保商品描述、价格、图片等真实准确，不得夸大其词或误导消费者。',
							'交易安全：线下交易，请自行承担风险，并注意交易安全。',
							'售后服务：作为卖家，应提供必要的售后服务，如退换货、维修等，保障买家权益，提升购物体验。',
							'遵守规则：请遵守小程序关于出售闲置的各项规则与政策，不得进行恶意刷单、虚假交易等违规行为。'
						]
					},
					{
						id: 5,
						title: '关于排行榜',
						content: [
							'每周见证社区"明星"！我们设有两大榜单：',
							'热心榜： 表彰每周接单助人最多的热心邻居。',
							'需求榜： 展示每周下单最活跃的用户。',
							'每周日24点结算',
							'荣登双榜榜首，让您的热心与活跃，收获社区的认可与回报！',
							'上榜最低单数 10单',
						]
					},
					{
						id: 6,
						title: '如何切换小区',
						content: [
							'联系客服',
							'提交工单(个人中心 - 投诉建议)',
						]
					}
				]
			};
		},
		methods: {
			closePage() {
				uni.navigateBack()
			},
			change(e) {
				// console.log(e);
			},
			clickContent(e) {
				// console.log(e);
			},
		}
	}
</script>

<style lang="scss" scoped>
	.instructions-page {
		min-height: 100vh;
		background: #f5f7fa;
	}

	.header-container {
		display: flex;
		align-items: center;
		padding: 0 32rpx;
		width: 100%;
		height: 88rpx;
		
		.back-btn {
			margin-right: 20rpx;
			padding: 8rpx;
			
			.cuIcon-back {
				font-size: 36rpx;
				color: #2C2622;
			}
		}
		
		.page-title {
			font-weight: 600;
			font-size: 36rpx;
			color: #2C2622;
		}
	}

	.content-container {
		padding: 32rpx;
	}

	.intro-card {
		background: #FFFFFF;
		border-radius: 20rpx;
		padding: 32rpx 24rpx;
		margin-bottom: 32rpx;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		
		.intro-header {
			display: flex;
			align-items: center;
			margin-bottom: 16rpx;
			
			.intro-icon {
				width: 48rpx;
				height: 48rpx;
				background: linear-gradient(135deg, #FE6100 0%, #FF6B35 100%);
				border-radius: 12rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				margin-right: 16rpx;
				
				.cuIcon-notification {
					font-size: 24rpx;
					color: #FFFFFF;
				}
			}
			
			.intro-title {
				font-size: 32rpx;
				color: #2C2622;
				font-weight: 600;
			}
		}
		
		.intro-desc {
			font-size: 28rpx;
			color: #606266;
			line-height: 1.6;
		}
	}

	.collapse-section {
		background: #FFFFFF;
		border-radius: 20rpx;
		overflow: hidden;
		box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
		margin-bottom: 32rpx;
		
		.content-list {
			padding: 24rpx 32rpx;
			
			.content-item {
				margin-bottom: 24rpx;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.item-content {
					display: flex;
					align-items: flex-start;
					
					.item-number {
						width: 32rpx;
						height: 32rpx;
						background: #FE6100;
						color: #FFFFFF;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 20rpx;
						font-weight: 600;
						margin-right: 16rpx;
						margin-top: 4rpx;
						flex-shrink: 0;
					}
					
					.item-text {
						font-size: 28rpx;
						color: #606266;
						line-height: 1.6;
						flex: 1;
					}
				}
			}
		}
	}

	.footer-tip {
		background: #fff3cd;
		border: 1rpx solid #ffeaa7;
		border-radius: 16rpx;
		padding: 24rpx;
		
		.tip-content {
			display: flex;
			align-items: flex-start;
			
			.tip-icon {
				margin-right: 16rpx;
				margin-top: 4rpx;
				
				.cuIcon-warn {
					font-size: 32rpx;
					color: #f39c12;
				}
			}
			
			.tip-text {
				flex: 1;
				
				.tip-title {
					font-size: 28rpx;
					color: #856404;
					font-weight: 600;
					margin-bottom: 8rpx;
					display: block;
				}
				
				.tip-desc {
					font-size: 26rpx;
					color: #856404;
					line-height: 1.4;
				}
			}
		}
	}
</style>